"use client";
import { Layout, Menu, theme } from "antd";
import { useRouter, usePathname, redirect } from "next/navigation";
import { useState } from "react";
import Image from "next/image";
import {
  BookOutlined,
  FileTextOutlined,
  UserOutlined,
  PictureOutlined,
} from "@ant-design/icons";

const { Header, Sider, Content } = Layout;

const items = [
  {
    key: "coral-class",
    icon: <BookOutlined />,
    label: "珊瑚课堂",
  },
  {
    key: "article",
    icon: <FileTextOutlined />,
    label: "社区文章",
  },
  {
    key: "home-media",
    icon: <PictureOutlined />,
    label: "首页轮播图",
  },
  {
    key: "user",
    icon: <UserOutlined />,
    label: "用户管理",
  },
  {
    key: "prompt",
    icon: <FileTextOutlined />,
    label: "提示词管理",
  },
];

export default function ManageLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  // 进入的页面名称
  const pageName = pathname.split("/").pop();
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handleMenuClick = (key: string) => {
    router.push(`/manage/${key}`);
  };

  // 如果是登录页面，不显示布局
  if (pathname === "/manage/login") {
    return <>{children}</>;
  }
  if (typeof window !== "undefined" && window.location.pathname === "/manage") {
    redirect("/manage/coral-class");
  }

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div
          style={{
            height: 32,
            margin: 16,
            background: "rgba(255, 255, 255, 0.2)",
            color: "#fff",
            textAlign: "center",
            lineHeight: "32px",
          }}
        >
          珊瑚保护系统
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["coral-class"]}
          items={items}
          selectedKeys={[pageName || "coral-class"]}
          onClick={({ key }) => handleMenuClick(key)}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            boxShadow: "0 1px 4px rgba(0,21,41,.08)",
            position: "relative",
            height: "64px",
            display: "flex",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              padding: "0 24px",
              width: "100%",
            }}
          >
            <div
              style={{
                fontSize: "18px",
                fontWeight: 500,
                color: "#1a1a1a",
              }}
              className="flex h-6 items-center gap-4"
            >
              <Image src="/favicon.png" alt="" width={24} height={24} />
              欢迎你，管理者
              {/* <div>
                <Button onClick={() => router.push("/customer/home")}>
                  返回首页
                </Button>
              </div> */}
            </div>

            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "8px",
              }}
            >
              <UserOutlined style={{ fontSize: "16px" }} />
              <span>当前用户: Admin</span>
            </div>
          </div>
        </Header>
        <Content style={{ margin: "24px 16px" }}>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}
